import { Button, Input } from "antd";
import { useState } from "react";

export function InputArea({ getTodo }: { getTodo: (todo: string) => void }) {
  const [todo, setTodo] = useState("");
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <Input
        style={{ width: "80%" }}
        className="input"
        placeholder="Basic usage"
        value={todo}
        onChange={(e) => {
          setTodo(e.target.value);
        }}
      />
      <Button
        className="button"
        disabled={!todo}
        type="primary"
        onClick={() => {
          getTodo(todo);
          setTodo("");
        }}
      >
        add todoList
      </Button>
    </div>
  );
}
